<script setup>
import {Edit, Delete} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import {measureDelService, measureUpdateService, searchMeasure, searchPag} from "@/api/measure";
import {ElMessage} from 'element-plus'
import {measureAddService} from "@/api/measure";


//帮扶措施名称选择
const measures = ref({
  measureid:'',
  measurename:''
})
const measurelist=([])
const searchMeasureList = async () => {
  let result = await searchMeasure();
  measures.value=result.data
  // console.log(111)
  // console.log(measures.value)
  // console.log(measurelist)
}
searchMeasureList()


//查询
const searchClick=((res)=>{
  Page();
});
//帮扶措施数据模型
const measure = ref([])
const Page = async () => {
  searchPag(form).then((res) => {
    console.log(form)
    measure.value = res.data;
    // total.value = res.data.total;
  });
}
const form = reactive({
  measurename:'',
  measureid: ''
})
onMounted(() => {
  Page();
});


//重置
const rest=((res)=>{
  form.measureid='';
  form.measurename='';
  Page();
});


//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(100)//总条数
const pageSize = ref(3)//每页条数
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
}


//控制编辑对话框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
//打开编辑对话框
const form1 = ref([])
const tableData1 = ref([])
const update=(index,row)=>{
  dialogFormVisible.value=true;
  tableData1.value =index
  form1.value =JSON.parse(JSON.stringify(row))
};
//确认编辑
const updateMeasure = async (clickState)=>{
  //调用接口
  let result = await measureUpdateService(form1.value);
  ElMessage.success(result.msg? result.msg:'编辑成功');
  //让对话框消失
  dialogFormVisible.value = false
}


const tableData2 = ref([])
//点击删除
const del=(index,row)=>{
  tableData1.value =index
  tableData2.value =JSON.parse(JSON.stringify(row))
};
//删除所选帮扶措施
const delMeasure = async (clickState)=>{
  //调用接口
  let result = await measureDelService(tableData2.value);
  ElMessage.success(result.msg? result.msg:'删除成功');
}


import '@vueup/vue-quill/dist/vue-quill.snow.css'
//控制抽屉是否显示
const visibleDrawer = ref(false)
//添加表单数据模型
const measureModel = ref({
  measureid:' ',
  measurename:' '
})
//添加帮扶措施
const addMeasure = async (clickState)=>{
  //调用接口
  let result = await measureAddService(measureModel.value);
  ElMessage.success(result.msg? result.msg:'添加成功');
  //让抽屉消失
  visibleDrawer.value = false;
}
const no = async (clickState)=>{
  //让抽屉消失
  visibleDrawer.value = false;
}
</script>


<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>帮扶措施管理</span>
        <div class="extra">
          <el-button type="primary" @click="visibleDrawer = true">添加帮扶措施</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form :model="form" inline>
      <el-form-item label="帮扶措施名称：" style="width: 250px">
        <el-select placeholder="请选择" v-model="form.measurename">
          <el-option v-for="m in measures" :key="m.measureid" :label="m.measurename" :value="m.measurename">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchClick">查询</el-button>
        <el-button @click="rest">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 帮扶措施列表 -->
    <el-table :data="measure" style="width: 100%">
      <el-table-column label="编号" prop="measureid"></el-table-column>
      <el-table-column label="帮扶措施名称" prop="measurename"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button :icon="Edit" circle plain type="primary" @click="update(scope.$index,scope.row)"></el-button>
          <el-popconfirm title="确认删除?" @confirm="delMeasure">
            <template #reference>
              <el-button :icon="Delete" circle plain type="danger" @click="del(scope.$index,scope.row)"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" title="添加帮扶措施" direction="rtl" size="23%">
      <el-form :model="measureModel" label-width="100px">
        <el-form-item label="帮扶措施编号">
          <el-input v-model="measureModel.measureid" placeholder="请输入帮扶措施编号"></el-input>
        </el-form-item>
        <el-form-item label="帮扶措施名称">
          <el-input v-model="measureModel.measurename" placeholder="请输入帮扶措施名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addMeasure('提交')">提交</el-button>
          <el-button type="info" @click="no('取消')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog v-model="dialogFormVisible" title="帮扶措施编辑" width="500">
      <el-form :model="form1">
        <el-form-item label="帮扶措施编号" :label-width="formLabelWidth">
          <el-input v-model="form1.measureid" disabled/>
        </el-form-item>
        <el-form-item label="帮扶措施名称" :label-width="formLabelWidth">
          <el-input v-model="form1.measurename" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updateMeasure">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
/* 抽屉样式 */
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>